﻿<UserControl x:Class="mal.balades.SlideShow.MainPage"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:malSilverlight="clr-namespace:mal.web.Silverlight.Controls;assembly=mal.web.Silverlight"
             xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"
             xmlns:local="clr-namespace:mal.balades.SlideShow"
             xmlns:viewModel="clr-namespace:mal.balades.SlideShow.ViewModel"
             mc:Ignorable="d"                     
             DataContext="{Binding Main, Source={StaticResource Locator}}"
              Width="532" Height="454"
             Background="Transparent">  
    <Grid x:Name="LayoutRoot" Background="Transparent" 
          MouseMove="LayoutRoot_MouseMove"> 
        
        <ItemsControl ItemsSource="{Binding Pictures}" x:Name="pictures" >
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <malSilverlight:SlideShow x:Name="slideShow" IsEnabled="{Binding IsPlaying}" Interval="5000" TransitionDuration="500" />
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <local:ImageView />
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>

        <Grid  HorizontalAlignment="Stretch" VerticalAlignment="Bottom"  Height="50">
            <Grid.RenderTransform>
                <TranslateTransform x:Name="menu"  />
            </Grid.RenderTransform>
            <Grid.Resources>
                <Storyboard x:Name="showMenu">
                    <DoubleAnimation To="0" Duration="0:0:0.300" 
                                 Storyboard.TargetName="menu"
                                 Storyboard.TargetProperty="Y" />
                </Storyboard>

                <Storyboard x:Name="closeMenu">
                    <DoubleAnimation To="60" Duration="0:0:0.300"                                  
                                 Storyboard.TargetName="menu"
                                 Storyboard.TargetProperty="Y" />
                </Storyboard>
            </Grid.Resources>
            
            <Grid Margin="8" >
                <Grid.Background>
                    <SolidColorBrush Color="Black" Opacity="0.6" />
                </Grid.Background>
                           

            </Grid>

            <ToggleButton VerticalAlignment="Center" 
                    HorizontalAlignment="Center" Margin="0,0,0,0" 
                    ToolTipService.ToolTip="{Binding PlayToolTip}"
                    Command="{Binding PlayCommand}"
                    >
                <ToggleButton.Template>
                    <ControlTemplate>
                        <Grid Cursor="Hand">
                            <vsm:VisualStateManager.VisualStateGroups>
                                <vsm:VisualStateGroup x:Name="CommonStates">
                                    <vsm:VisualState x:Name="MouseOver">
                                        <Storyboard >
                                            <!--<DoubleAnimation Storyboard.TargetName="play" 
                                                             Storyboard.TargetProperty="Width"
                                                             To="52" Duration="0:0:0.3" />
                                            <DoubleAnimation Storyboard.TargetName="pause" 
                                                             Storyboard.TargetProperty="Width"
                                                             To="52" Duration="0:0:0.3" />-->
                                        </Storyboard>
                                    </vsm:VisualState>
                                </vsm:VisualStateGroup>
                                <vsm:VisualStateGroup x:Name="CheckStates">
                                    <vsm:VisualState x:Name="Checked">
                                        <Storyboard >
                                            <DoubleAnimation Storyboard.TargetName="play" 
                                                             Storyboard.TargetProperty="Opacity"
                                                             To="0" Duration="0:0:0.3" />
                                            <DoubleAnimation Storyboard.TargetName="pause" 
                                                             Storyboard.TargetProperty="Opacity"
                                                             To="1" Duration="0:0:0.3" />
                                        </Storyboard>
                                    </vsm:VisualState>
                                    <vsm:VisualState x:Name="Unchecked">
                                        <Storyboard >
                                            <DoubleAnimation Storyboard.TargetName="play" 
                                                             Storyboard.TargetProperty="Opacity"
                                                             To="1" Duration="0:0:0.3" />
                                            <DoubleAnimation Storyboard.TargetName="pause" 
                                                             Storyboard.TargetProperty="Opacity"
                                                             To="0" Duration="0:0:0.3" />
                                        </Storyboard>
                                    </vsm:VisualState>
                                </vsm:VisualStateGroup>
                            </vsm:VisualStateManager.VisualStateGroups>
                            
                            <Ellipse Width="45" Height="45" >
                                <Ellipse.Fill>
                                    <RadialGradientBrush Center="0.718,0.317" GradientOrigin="0.718,0.317">
                                        <GradientStop Color="Gray" />
                                        <GradientStop Color="Black" Offset="1"/>                
                                    </RadialGradientBrush>

                                </Ellipse.Fill>
                            </Ellipse>
                            <Image Source="/Images/SlideShow/Play.png" x:Name="play" Opacity="1" />
                            <Image Source="/Images/SlideShow/Pause.png" x:Name="pause" Opacity="0" />                           
                        </Grid>
                    </ControlTemplate>
                </ToggleButton.Template>
            </ToggleButton>

            <Button VerticalAlignment="Center" 
                    HorizontalAlignment="Right" Margin="0,0,10,0" 
                    ToolTipService.ToolTip="Fermer le diaporama."
                    Command="{Binding CloseCommand}"
                    >
                <Button.Template>
                    <ControlTemplate>
                        <Grid Cursor="Hand">
                            <Ellipse Width="25" Height="25" >
                                <Ellipse.Fill>
                                    <RadialGradientBrush Center="0.718,0.317" GradientOrigin="0.718,0.317">
                                        <GradientStop Color="Gray" />
                                        <GradientStop Color="Black" Offset="1"/>
                                    </RadialGradientBrush>

                                </Ellipse.Fill>
                            </Ellipse>

                            <Image Source="/Images/SlideShow/Close.png" x:Name="close" 
                                   Width="25" Height="25" Opacity="1" />
                        </Grid>
                    </ControlTemplate>
                </Button.Template>
            </Button>
        </Grid>
        
    </Grid>
</UserControl>
